<template>
  <view class="container" v-if="!isLoading">
    <xy-title :title="detail.title"></xy-title>
    <view class="bg_box"></view>
    <view class="userinfo">
      <view class="avatar">
        <image :src="$xyfun.image(avatar)"></image>
      </view>
      <view class="info">
        <view class="nickname">HI,{{ nickname }}
        </view>
        <view class="uplevel">升级攻略 ↑</view>
      </view>
    </view>
      <view class="card cur_card">
        <image :src="$xyfun.image(detail.bgimage)" class="card_bg"></image>
        <view class="cur" v-if="detail.nums">当前等级</view>
        <view class="info">
          <view class="slogan">{{ detail.slogan }} {{ detail.title }}</view>
          <view class="overtime" v-if="detail.nums">
            {{$xyfun.dataFormat(detail.overtime)}}过期
              <view class="but" :style="'color:'+ detail.theme_color">续期</view>
          </view>
          <view class="overtime" v-else></view>
          <view class="rule" :style="'color:'+ detail.theme_color">{{ detail.desc }}></view>
        </view>
        <view class="right">
          <image :src="$xyfun.image(detail.image)"></image>
        </view>
      </view>
    <block v-if="common.appConfig.appmodel==0">
      <view class="c-title">
        <view class="tit">
          <image :src="$xyfun.image('/static/images/benfit/card-tit.png')"></image>
          <text>会员尊享权益</text>
          <image :src="$xyfun.image('/static/images/benfit/card-tit.png')"></image>
        </view>
        <view class="desc">service privileges</view>
      </view>
      <view class="benfit-lists">
        <view class="bl-item" v-for="val in cont.root_menu">
          <view class="bl-img">
            <image :src="$xyfun.image(val.icon)"></image>
          </view>
          <view class="bl-tit">{{ val.title }}</view>
        </view>
      </view>

      <view class="c-title">
        <view class="tit">
          <image :src="$xyfun.image('/static/images/benfit/card-tit.png')"></image>
          <text>{{ cont.service_tit}}</text>
          <image :src="$xyfun.image('/static/images/benfit/card-tit.png')"></image>
        </view>
        <view class="desc">{{cont.service_desc}}</view>
      </view>


      <view class="root-lists">
        <view class="sing-item" v-for="val in cont.service_full">
          <view class="rl-title"><span>▶</span>{{ val.crumb }}</view>
          <view class="root-box">
            <view :style="{ backgroundImage:'url('+$xyfun.image(val.image)+')'}" class="rl-img"></view>
            <view class="rl-cont">
              <view class="rl-tit">{{ val.title }}</view>
              <view class="rl-desc">
                <p v-for="tag in $xyfun.splitTags(val.desc)">{{tag}}</p>
              </view>
              <view class="rl-price" :style="val.bgcolor">{{ val.value }}
              </view>
            </view>
          </view>
        </view>
        <view class="double-item">
          <view class="item" v-for="val in cont.service_half">
            <view class="rl-title"><span>▶</span>{{ val.crumb }}</view>
            <view class="rl-cont">
              <view :style="{ backgroundImage:'url('+$xyfun.image(val.image)+')'}" class="rl-img"></view>
              <view class="rl-tit">
                {{ val.title }}
                <view class="rl-price" :style="val.bgcolor">
                  {{ val.value }}
                </view>
              </view>
              <view class="rl-desc">
                <p v-for="tag in $xyfun.splitTags(val.desc)">{{tag}}</p>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="c-title">
        <view class="tit">
          <image :src="$xyfun.image('/static/images/benfit/card-tit.png')"></image>
          <text>{{cont.goods_tit}}</text>
          <image :src="$xyfun.image('/static/images/benfit/card-tit.png')"></image>
        </view>
        <view class="desc">{{cont.goods_desc}}</view>
      </view>
      <view class="goods-list">
        <view class="gl-item" v-for="val in cont.goods" :style="{ backgroundImage:'url('+$xyfun.image('/static/images/benfit/benfit_bg.png')+')'}">
          <view class="gl-check-item check"></view>
          <view class="gl-tit">
            <text>{{ val.title }}</text>
            <text>{{ val.value }}</text>
          </view>
          <view class="gl-desc">
            {{ val.desc }}
          </view>
          <image :src="$xyfun.image(val.image)"></image>
        </view>

      </view>

      <view class="c-title">
        <view class="tit">
          <image :src="$xyfun.image('/static/images/benfit/card-tit.png')"></image>
          <text>{{cont.open_tit}}</text>
          <image :src="$xyfun.image('/static/images/benfit/card-tit.png')"></image>
        </view>
        <view class="desc">{{cont.open_desc}}</view>
      </view>

      <view class="card-box" :style="{ backgroundImage:'url('+$xyfun.image('/static/images/benfit/open_card.png')+')'}">
        <view class="cb-value">
          <view class="cb-tit">{{ cont.open_card_tit }}</view>
          <view class="cb-desc">{{cont.open_card_desc}}</view>
          <view class="cb-price">{{ detail.price }}元</view>
        </view>
        <view class="cb-lists">
          <view class="cb-item" v-for="val in cont.open_column">
            <view>{{val.tit}}</view>
            <text>{{val.desc}}</text>
          </view>
        </view>
      </view>

      <view class="total_money">
        <view class="nums">
          <view>数量：</view>
          <view class="yz-iconfont yz-jianshao" @tap="numsMinus"></view>
          <view>{{ nums }}</view>
          <view class="yz-iconfont yz-zengjia" @tap="numsAdd"></view>
        </view>
        <view class="money">总金额：<text>{{money}}</text>元</view>
      </view>
      <view class="confirm" :style="{ backgroundImage:'url('+$xyfun.image('/static/images/benfit/card-confirm.png')+')'}"
            @click="goPay()">{{cont.button}}
      </view>
    </block>
    <payPop ref='payPop' @createOrder="createOrder"></payPop>
  </view>
</template>

<script>
import {mapState} from 'vuex';
import xyTitle from "@/components/xy-title/index.vue";
import payPop from '@/components/paypop/index.vue';
import Pay from '@/utils/pay';

export default {
  components: {xyTitle,payPop},
  data() {
    return {
      isLoading: true,
      avatar : '',
      nickname : '未登录',

      id: 3,
      cont : {},
      detail : {},
      nums : 1,
      money : 0
    };
  },
  computed: {
    ...mapState(['common', 'user'])
  },
  async onLoad(options) {
    this.id = options.id;
    this.loadData();
  },
  methods: {
    swiperChange(e) {
      this.current_swiper = e.detail.current;
    },
    async loadData() {
      var that = this;
      this.$api.post({
        url: '/benfit/card',
        loadingTip: '加载中...',
        data: {
          id: this.id
        },
        success: res => {
          if(res.userinfo){
            this.nickname = res.userinfo.nickname;
            this.avatar = res.userinfo.avatar;
          }
          this.detail = res.card;
          this.money = this.detail.price;
          this.cont = res.card.content;
          this.isLoading = false;
        }
      });
    },

    numsAdd(){
      this.nums ++;
      this.money = this.nums * this.detail.price;
    },

    numsMinus(){
      if(this.nums>0){
        this.nums --;
        this.money = this.nums * this.detail.price;
      }
    },

    goPay() {
      if(this.user.isLogin){
        this.$refs.payPop.showDiaLog(this.money)
      }else{
        this.$xyfun.toLogin();
      }
    },

    //创建订单
    createOrder(pay_type){
      var that = this;
      // 提交订单
      this.$api.post({
        url: '/card_order/add',
        data: {
          card_id:this.detail.id,
          nums : this.nums
        },
        loadingTip: '提交订单中...',
        success: res => {
          //发起支付
          var pay = new Pay(pay_type, res, 'card');
          pay.payMehod().then((res)=>{
            that.disabled = false;
            that.$refs.payPop.disabled = false;
            pay.payResult(res);
          },(res)=>{
            that.$refs.payPop.disabled = false;
            if(pay_type != 'balance'){
              pay.payResult(res);
            }
          });
        },fail: res=>{
          that.$refs.payPop.disabled = false;
        }
      });
    },

  }
}
</script>

<style lang="scss">
.container {
  overflow: hidden;
  background: linear-gradient(to bottom, #b7e5fb, #fff, #fff);
}

.bg_box {

  height: 900rpx;
  width: 100%;
  position: absolute;
  z-index: -1;
}

.userinfo {
  display: flex;
  margin: 160rpx 30rpx 20rpx 30rpx;

  .avatar {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 20rpx;
    background: #f2f2f2;

    image {
      width: 90rpx;
      height: 90rpx;
    }
  }

  .info {
    .nickname {
      display: flex;
      margin-bottom: 10rpx;
      font-size: 34rpx;

      .grade {
        margin-left: 20rpx;
        color: #fff;
        font-size: 26rpx;
        background: linear-gradient(to right, #62b47d, #1f7cb4);
        border-top-left-radius: 14rpx;
        border-bottom-right-radius: 14rpx;
        height: 40rpx;
        line-height: 40rpx;
        padding: 0 10rpx;
      }
    }

    .uplevel {
      font-size: 26rpx;
    }
  }
}


.card {
  display: flex;
  justify-content: space-between;
  margin: 60rpx 20rpx 30rpx 20rpx;
  border-radius: 20rpx;
  height: 300rpx;
  position: relative;

  .card_bg {
    width: 100%;
    height: 300rpx;
    position: absolute;
  }

  .cur {
    position: absolute;
    left: 0;
    top: 0;
    background: #e8bc8e;
    border-top-left-radius: 20rpx;
    font-size: 26rpx;
    color: #7e5127;
    font-weight: bold;
    padding: 0 6rpx 0 14rpx;
    height: 50rpx;
    line-height: 50rpx;

    &:after {
      content: '';
      display: block;
      position: absolute;
      width: 40rpx;
      height: 50rpx;
      right: -23rpx;
      top: 0;
      background: #e8bc8e;
      clip-path: polygon(100% 0, 40% 0, 40% 100%);
    }
  }

  .info {
    z-index: 1;
    margin-top: 50rpx;
    color: #fff;
    margin-left: 50rpx;

    .slogan {
      font-size: 32rpx;
      font-weight: bold;
      margin-top: 20rpx;
    }

    .title {
      font-size: 32rpx;
      margin-bottom: 10rpx;
      font-weight: bold;
    }

    .overtime {
      font-size: 20rpx;
      display: flex;
      align-items: center;
      height: 50rpx;
      width: 300rpx;
      border-bottom: 1rpx solid #fff;

      .but {
        display: none;
        background: #fafdff;
        color: #49a78d;
        font-size: 26rpx;
        padding: 4rpx 20rpx;
        border-radius: 30rpx;
        margin-left: 20rpx;
      }
    }

    .rule {
      display: inline-block;
      margin-top: 94rpx;
      margin-left: -10rpx;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 30rpx;
      padding: 0 20rpx;
      font-size: 22rpx;
      background: linear-gradient(to right, #fff, #e1f4ff);
      color: #4e8295;
    }
  }

  .right {
    // position: relative;

    image {
      z-index: 1;
      position: absolute;
      top: -40rpx;
      right: -20rpx;
      width: 230rpx;
      height: 180rpx;
    }

    .buy {
      border-radius: 30rpx;
      font-weight: bold;
      padding: 10rpx 10rpx;
      font-size: 26rpx;
      position: absolute;
      right: 10rpx;
      bottom: 40rpx;
      width: 180rpx;
      text-align: center;
      color: #2885a7;
      background: linear-gradient(to right, #fff, #ecf4fc, #fff);
    }
  }
}

.cur_card {
  height: 340rpx;
  margin-top: 40rpx;

  .card_bg {
    height: 340rpx;
  }
}


.c-title {
  text-align: center;
  color: #0068b7;
  margin-top: 30rpx;
  margin-bottom: 30rpx;

  .tit {
    display: inline-flex;
    font-size: 36rpx;
    font-weight: bold;
    position: relative;
    align-items: flex-end;

    image {
      width: 30rpx;
      height: 30rpx;
      margin-bottom: 4rpx;
    }

    text {
      display: inline-block;
      margin: 0 30rpx;
    }

    &:before {
      content: '';
      display: block;
      position: absolute;
      width: 130rpx;
      height: 1rpx;
      background: #1c7ab5;
      left: -150rpx;
      top: 26rpx;
    }

    &:after {
      content: '';
      display: block;
      position: absolute;
      width: 130rpx;
      height: 1rpx;
      background: #1c7ab5;
      right: -150rpx;
      top: 26rpx;
    }
  }

  .desc {
    margin-top: -5rpx;
    font-size: 18rpx;
  }
}

.benfit-lists {
  display: flex;
  justify-content: space-between;
  margin: 0 40rpx 60rpx 40rpx;

  .bl-item {
    .bl-img {
      width: 100rpx;
      height: 100rpx;
      border-radius: 75rpx;
      background: #eeeeee;
      text-align: center;
      margin-bottom: 10rpx;

      image {
        width: 70rpx;
        height: 70rpx;
        margin-top: 15rpx;
      }
    }

    .bl-tit {
      font-size: 24rpx;
      margin-top: 20rpx;
      color: #949494;
    }
  }
}

.root-lists {
  margin: 0 40rpx 100rpx 40rpx;
  text-align: left;

  .rl-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 15rpx;

    span {
      font-size: 18rpx;
      margin-right: 10rpx;
    }
  }

  .root-box {
    display: flex;
    border-radius: 10rpx;
    overflow: hidden;
    box-shadow: 0 0 20rpx #adadad;
  }

  .rl-img {
    background-size: cover;
    height: 200rpx;
    width: 300rpx;
    flex-grow: 0;
  }

  .rl-cont {
    background-color: #fff;
    font-size: 20rpx;

    .rl-tit {
      margin-top: 15rpx;
      font-size: 20rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
      padding: 10rpx 20rpx 0 20rpx;
    }

    .rl-desc {
      padding: 0 20rpx 20rpx 20rpx;
      font-size: 18rpx;
    }

    .rl-price {
      margin-top: 20rpx;
      margin-left: 20rpx;
      margin-right: -20rpx;
      padding: 0 15rpx;
      height: 34rpx;
      line-height: 34rpx;
      border-radius: 16rpx;
      background: #448ac9;
      font-size: 18rpx;
      color: #fff;
      display: inline-block;
      white-space: nowrap;
    }
  }


  .sing-item {
    .rl-cont {
      width: 1rpx;
      flex-grow: 1;

      .rl-price {
        margin: 0 0 20rpx 20rpx;
      }
    }
  }

  .double-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      width: 320rpx;
      margin-top: 30rpx;
      .rl-cont {
        height: 350rpx;
        border-radius: 10rpx;
        overflow: hidden;
        box-shadow: 0 0 8rpx #adadad;
      }

      .rl-tit {
        display: flex;

        .rl-price {
          margin-top: 0;
        }
      }

      .rl-img {
        width: 100%;
      }
    }
  }
}

.goods-list {
  margin-top: -20rpx;
  padding: 0 30rpx 30rpx 30rpx;
  overflow: hidden;

  .gl-title {
    font-size: 30rpx;
    font-weight: bold;
    margin-top: 30rpx;
  }

  .gl-item {
    background: #a0c8e8;
    overflow: hidden;
    background-size: 100% 100%;
    margin-top: 20rpx;
    border-radius: 10rpx;
    position: relative;
    height: 160rpx;
    padding-left: 100rpx;
    box-sizing: border-box;

    .gl-check-item {
      width: 36rpx;
      height: 36rpx;
      box-sizing: border-box;
      border-radius: 18rpx;
      border: 1rpx solid #fff;
      position: absolute;
      top: 20rpx;
      left: 20rpx;

      &.check {
        background: #0068b7;
        border-color: #0068b7;

        &:before {
          content: '';
          display: block;
          background: #fff;
          width: 5rpx;
          height: 20rpx;
          transform: rotate(45deg);
          position: absolute;
          left: 19rpx;
          top: 8rpx;
        }

        &:after {
          content: '';
          display: block;
          background: #fff;
          width: 5rpx;
          height: 15rpx;
          transform: rotate(-45deg);
          position: absolute;
          top: 14rpx;
          left: 8rpx;
        }
      }
    }

    .gl-tit {
      margin-top: 30rpx;
      font-size: 30rpx;
      font-weight: bold;
      white-space: nowrap;

      text:nth-of-type(2) {
        color: #e26e26;
        margin-left: 20rpx;
      }
    }

    .gl-desc {
      width: 400rpx;
      margin-top: 10rpx;
      font-size: 20rpx;
    }

    image {
      width: 80rpx;
      height: 80rpx;
      position: absolute;
      right: 20rpx;
      bottom: 20rpx;
    }
  }
}

.card-box {
  margin: 0 30rpx 70rpx 30rpx;
  height: 510rpx;
  background-size: 100% 100%;
  overflow: hidden;

  .cb-value {
    height: 180rpx;
    margin-left: 50rpx;

    .cb-tit {
      margin-top: 60rpx;
      font-size: 40rpx;
      font-weight: bold;
    }

    .cb-desc {
      margin-top: 10rpx;
    }

    .cb-price {
      margin-top: 70rpx;
      font-size: 40rpx;
    }
  }

  .cb-lists {
    margin-top: 150rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;

    .cb-item {
      color: #fff;
      text-align: center;

      view {
        font-size: 38rpx;
      }

      text {
        font-size: 24rpx;
      }
    }
  }
}

.total_money{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40rpx;
  margin-top: -40rpx;
  margin-bottom: 40rpx;
  white-space: nowrap;
  .nums {
    display: flex;
    width: 240rpx;
    justify-content: space-between;
    margin-top: 20rpx;

    .yz-iconfont {
      color: #0068b7;
      font-size: 38rpx;
    }
  }
  .money{
    font-size: 30rpx;
    text{
      color: #e26e26;
      font-weight: bold;
    }
  }
}

.confirm {
  height: 90rpx;
  margin: 0 40rpx 100rpx 40rpx;
  background-size: 100% 100%;
  text-align: center;
  line-height: 90rpx;
  color: #fff;
  font-weight: bold;
  letter-spacing: 2rpx;
}
</style>
